<template>
    <view class="sunbathing-container" :style="themeColor">
        <header-bar :config="config"></header-bar>
            <pure-top height="365" />
            <view class="main">
                <head-info />
                <upload-receipt @imageList="imageList"/>
                <product-select />
                <product-list v-if="selectedSunBathProducts.length > 0"/>
                <view class="cell-main flex-between"
                    >
                    <view class="text">联系方式</view>
                    <input
                        class="cell-input"
                        type="number"
                        v-model="contantTel"
                        placeholder="请填写手机号"
                        placeholder-class="placeColor"
						maxlength="11"
                /></view>
            </view>
         
        <sunbath-bottom @submit="submit" />
    </view>
</template>

<script>
import { mapState, mapMutations } from "vuex"
import { CHANGE_SUNBATH_SELECTED } from "@/store/mutation-type.js"
import pureTop from "./common/pure-top.vue"
import headInfo from "./sunbathChildCpns/head-info.vue"
import uploadReceipt from "./sunbathChildCpns/upload-receipt.vue"
import productSelect from "./sunbathChildCpns/product-select.vue"
import productList from "./sunbathChildCpns/product-list.vue"
import sunbathBottom from "./sunbathChildCpns/sunbath-bottom.vue"
import { Save } from "@/service/api/baskOrder.js"
import { getAccountBalance, GetUserLoginList, SwitchUserLogin,GetMemberGradeInfo} from "@/service/api/member.js"
export default {
	computed: {
	    ...mapState("sunbathing", ["selectedSunBathProducts"]),
	},
    components: {
        pureTop,
        headInfo,
        uploadReceipt,
        productSelect,
        productList,
        sunbathBottom,
    },
    data() {
        return {
            config: {
                title: "晒单",
                color: ["#ffffff"],
                back: true,
            },
			imgs:[],
			oneshubmit:true,
            
            contantTel: ''
        }
    },
    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
    },
	mounted() {
		this.GetStoreId()
	},
	methods:{
		...mapMutations("sunbathing", [CHANGE_SUNBATH_SELECTED]),
		imageList(data){
			this.imgs = data;
		},
		GetStoreId(){
			GetMemberGradeInfo().then((rsp) => {
				if (rsp.State == 1 && rsp.Data) {
					if(!(rsp.Data.Name=='会员晒单' || rsp.Data.Name=='业务代理' || rsp.Data.Name=='超级会员' || rsp.Data.Name=='批发客户')){
						uni.showModal({
						    title: "提示",
						    content: '您没有操作权限',
						    showCancel: false,
							success: (res) => {
								if(res.confirm) {  
									uni.reLaunch({
									    url: "/pages/index/index",
									})
								} 
							}
						})
					}
				}
			})
		},
		submit(){
			if(this.selectedSunBathProducts.length == 0){
				this.easyToast('请选择晒单商品')
				return
			}
			if(this.imgs.length == 0){
				this.easyToast('请上传晒单图片')
				return
			}
			if (this.contantTel=="") {
			        this.easyToast("请输入手机号")
			        return false
			}
			if (this.contantTel) {
			    let regMobile = /^1[3456789]\d{9}$/
			    if (!regMobile.test(this.contantTel)) {
			        this.easyToast("请输入正确的手机号")
			        return false
			    }
			}
			let detailList = [];
			this.selectedSunBathProducts.forEach(item =>{
				let obj = {
					productId:item.ProductId,
					productName:item.ProductName,
					amount:item.count,
				}
				detailList.push(obj)
			})
			let param = {}
			param.detailList = detailList
			param.imgUrls = this.imgs
            param.contactTel = this.contantTel
			if(this.oneshubmit){
				this.oneshubmit = false
				Save(param).then(res=>{
					if(res.State==1){
						this.easyToast('提交成功')
						setTimeout(e=>{
							this.easyGoTo('/pages_me/packet/sunbathing/index')
							this[CHANGE_SUNBATH_SELECTED]({})
						},1500)
					}else{
						this.easyToast(res.Msg)
					}
					setTimeout(e=>{
						this.oneshubmit = true
					},1600)
				})
			}
			
		},
	}
}
</script>

<style lang="scss">
.sunbathing-container {
    color: $color-gray-1;

    .scroll-Y {
        height: calc(100% - 88rpx - 120rpx);
    }

    .main {
        margin-top: -365rpx;
		padding-bottom: 140rpx;
    }
}
 .cell-main {
      background: #fff;
      padding: 24rpx;
      margin: 24rpx;
      border-radius: 16rpx;
          
        .text{
            font-size: $font-size-28;
            color: #333333;
        }
        .cell-input {
            color: $app-color-text-desc;
            font-size: $font-size-28;
            text-align: right;
        }
    }
</style>
